import { h, Component } from 'preact';
import { connect } from 'preact-redux';
import classNames from 'classnames';
import s from './Invitation.scss';
import DockBar from '~/components/DockBar';
import Modal from '~/components/Modal';
import Loading from '~/components/Loading';
import { myGroupsDetail, addGroupMembers } from '~/api/groups';
import history from '~/core/history';
import face from './face.jpg';

class Invitation extends Component {
	constructor(props) {
		super(props);
		this.state = {
			showModal: false,
			showCard: false,
			visible: false,
			dialogData: '',
			groupMemberSize: '--',
			cookId: this.props.user.id || null,
			groupLogo: null,
			delVisible: false
		};
	}

	componentWillMount() {
		this.setState({
			groupId: history.location.search.substr(4)
		});
		if (history.location.search.substr(4)) {
			this.getGroupDetail(history.location.search.substr(4));
		} else {
			history.push(decodeURIComponent('/'));
		}
	}

	componentWillReceiveProps(nextProps) {
		if (nextProps.user !== this.props.user) {
			this.setState({
				cookId: nextProps.user.id
			});
		}
	}

	getGroupDetail = (param) => {
		Loading.show();
		myGroupsDetail(param).then(res => {
			this.setState({
				groupName: res.groupName,
				groupMemberSize: res.groupMemberSize,
				groupLogo: res.groupLogo
			});
			Loading.hide();
		}).catch(err => {
			if (err.code === '404') {
				this.setState({ delVisible: true});
			} else {
				this.showDialog({
					dialogTitle: '对不起',
					dialogContent: err.message ? err.message : '系统繁忙, 请稍后重试！'
				});
			}
			Loading.hide();
		});
	}

	showDialog = (dialogData) => {
		this.setState(
			{
				visible: true,
				dialogData
			}
    );
	}

	handleJoin = () => {
		let { groupId, cookId } = this.state;
		console.log('cookId', cookId);
		Loading.show();
		if (!cookId) {
			Loading.hide();
			history.push(decodeURIComponent('/'));
		} else {
			addGroupMembers({
				groupId,
				cook: {id: cookId}
			}).then(res => {
				Loading.hide();
				history.push(decodeURIComponent(`/orgd?id=${groupId}`));
			}).catch(err => {
				this.showDialog({
					dialogTitle: '对不起',
					dialogContent: err.message ? err.message : '系统繁忙, 请稍后重试！'
				});
				Loading.hide();
			});
		}
	}

	// 关闭提示弹窗
	handerCloseDialog = () => {
		let { groupId } = this.state;
		this.setState({
			visible: false,
			isResult: false
		});
		history.push(decodeURIComponent(`/orgd?id=${groupId}`));
	}

	handerGoIndex = () => {
		history.push(decodeURIComponent('/'));
	}

	render({ path }) {
		const { groupName, groupMemberSize, groupLogo } = this.state;
		return (
			<div className={classNames(s.root)}>
				<div className={classNames(s.card, 'radius-small')}>
					<div className={s.face}>
						<img src={groupLogo?groupLogo:face} alt=""/>
					</div>
					<h3 className="al-c pdt1 pdb1">{groupName}</h3>
					<p className="al-c">{/*name, sss...*/}</p>
					<div className="al-c font-small">(共{groupMemberSize?groupMemberSize:'--'}人)</div>

					<div className="w9 center btn mgt4" onClick={this.handleJoin}>确定加入</div>
				</div>
				<Modal
					contentLabel="Modal"
					isOpen={this.state.visible}
					onRequestClose={this.handleHideCard}
					shouldCloseOnOverlayClick={true}
				>
				<div className="pd1 clearfix">
					<h3 className={`al-c pdt1 orange-dark font-bigger`}>{this.state.dialogData.dialogTitle}</h3>
					<p className="pdt1 pdb2 al-c">{this.state.dialogData.dialogContent}</p>
					<div
						onClick={this.handerCloseDialog}
						className="center w6 al-c btn"
					>确定</div>
				</div>
				</Modal>
				<Modal
					contentLabel="Modal"
					isOpen={this.state.delVisible}
					onRequestClose={this.handleHideCard}
					shouldCloseOnOverlayClick={true}
				>
				<div className="pd1 clearfix">
					<h3 className={`al-c pdt1 orange-dark font-bigger`}>对不起</h3>
					<p className="pdt1 pdb2 al-c">帮派已解散</p>
					<div
						onClick={this.handerGoIndex}
						className="center w6 al-c btn"
					>返回首页</div>
				</div>
				</Modal>
			</div>
		);
	}
}

function mapStateToProps(state) {
	return {
		user: state.user
	};
}

export default connect(mapStateToProps)(Invitation);
